import { guid } from '@/utils/index'
import {
  controlType,
  publicDataType,
  fillStyleType,
  strokeStyleType,
} from '@/modules/shareCanvas/interface/canvas-types'
// 所有控件关键字和图标的列表 -- 左侧控件列表
export const ControlTypeList: controlType[] = [
  {
    type: 'Font',
    icon: 'ant-design:font-colors-outlined',
    name: '文字',
  },
  {
    type: 'Rect',
    icon: 'bxs:rectangle',
    name: '矩形',
  },
  {
    type: 'Img',
    icon: 'akar-icons:image',
    name: '图片',
  },
]
export const strokeModeList = [
  {
    type: 'inside',
    label: '内部',
  },
  {
    type: 'center',
    label: '居中',
  },
  {
    type: 'outside',
    label: '外部',
  },
]
export const fillTypeList = [
  {
    type: 'color',
    label: '纯色',
  },
  {
    type: 'linearGradient',
    label: '线性渐变',
  },
  {
    type: 'radialGradient',
    label: '径向渐变',
  },
  {
    type: 'Img',
    label: '图片',
  },
]
/**
 * 图片显示的模式
 */
export const imgModeList = [
  {
    type: 'scaleToFill',
    label: '充满',
  },
  {
    type: 'aspectFit',
    label: '充满长边',
  },
  {
    type: 'aspectFill',
    label: '充满短边',
  },
  {
    type: 'widthFix',
    label: '充满宽度',
  },
  {
    type: 'heightFix',
    label: '充满高度',
  },
  {
    type: 'heightFix',
    label: '充满高度',
  },
  {
    type: 'repeat',
    label: '水平、垂直方向重复',
  },
  {
    type: 'repeat-x',
    label: '水平方向重复',
  },
  {
    type: 'repeat-y',
    label: '垂直方向重复',
  },
]
// canvas 所有canvas样式表单的列表 -- 右侧样式表单列表
export const findStyleData = (type: string) => {
  // 所有组件都具备的公共样式
  let commitData: publicDataType = {
    id: '',
    x: 10,
    y: 50,
    width: 50,
    height: 50,
  }

  let fill: fillStyleType = {
    type: 'color',
    color: '#ccc',
  }
  let stroke: strokeStyleType = {
    type: 'color',
    lineWidth: 0,
    color: '#ccc',
    mode: 'inside',
  }
  // 文字组件所具备的所有样式
  let fontStyle: publicDataType = {
    type: 'Font',
    text: 'Font',
    fontStyle: 'normal',
    fontWeight: 500,
    fontSize: 30,
    fontFamily: 'Arial',
    fill,
    stroke,
    ...commitData,
  }
  // 矩形组件所具备的所有样式
  let rectStyle: publicDataType = {
    type: 'Rect',
    cornerRadius: [],
    fill,
    stroke,
    ...commitData,
  }

  let styleDataList: publicDataType[] = [fontStyle, rectStyle]
  let styleData = styleDataList.find((item) => {
    if (item.type == type) {
      item.id = guid()
      return item
    }
  })
  return styleData
}
